<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en" xmlns:th="http://www.thymeleaf.org">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>系统信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css?v=1"/>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <button type="button" class="layui-btn" id="init">手动连接</button>
    <button type="button" class="layui-btn" id="destroy">断开连接</button>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg6">
            <div class="layui-card">
                <div class="layui-card-header">CPU信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <thead>
                        <tr>
                            <th>属性</th>
                            <td>值</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>核心数</td>
                            <td id="cpuNum"></td>
                        </tr>
                        <tr>
                            <td>用户使用率</td>
                            <td id="cpuUsed"></td>
                        </tr>
                        <tr>
                            <td>系统使用率</td>
                            <td id="cpuSys"></td>
                        </tr>
                        <tr>
                            <td>当前空闲率</td>
                            <td id="cpuFree"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg6">
            <div class="layui-card">
                <div class="layui-card-header">内存信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>内存</th>
                            <th>JVM</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>总内存</td>
                            <td id="memTotal"></td>
                            <td id="jvmTotal"></td>
                        </tr>
                        <tr>
                            <td>已用内存</td>
                            <td id="memUsed"></td>
                            <td id="jvmUsed"></td>
                        </tr>
                        <tr>
                            <td>剩余内存</td>
                            <td id="memFree"></td>
                            <td id="jvmFree"></td>
                        </tr>
                        <tr>
                            <td>使用率</td>
                            <td id="memUsage"></td>
                            <td id="jvmUsage"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header">JAVA虚拟机信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <tbody>
                        <tr>
                            <td class="layui-table-header">Jvm名称</td>
                            <td id="jvmName"></td>
                            <td class="layui-table-header">Java版本</td>
                            <td id="jvmVersion"></td>
                        </tr>
                        <tr>
                            <td class="layui-table-header">启动时间</td>
                            <td id="jvmStartTime"></td>
                            <td class="layui-table-header">运行时长</td>
                            <td id="jvmRunTime"></td>
                        </tr>
                        <tr>
                            <td colspan="1" class="layui-table-header">安装路径</td>
                            <td colspan="3" id="jvmHome"></td>
                        </tr>
                        <tr>
                            <td colspan="1" class="layui-table-header">项目路径</td>
                            <td colspan="3" id="sysUserDir"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <tbody>
                        <tr>
                            <td class="layui-table-header">服务器名称</td>
                            <td id="sysComputerName"></td>
                            <td class="layui-table-header">操作系统</td>
                            <td id="sysOsName"></td>
                        </tr>
                        <tr>
                            <td class="layui-table-header">服务器IP</td>
                            <td id="sysComputerIp"></td>
                            <td class="layui-table-header">系统架构</td>
                            <td id="sysOsArch"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header">磁盘信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <thead>
                        <tr>
                            <th>盘符路径</th>
                            <th>文件系统</th>
                            <th>盘符类型</th>
                            <th>总大小</th>
                            <th>可用大小</th>
                            <th>已用大小</th>
                            <th>已用百分比</th>
                        </tr>
                        </thead>
                        <tbody id="sysFiles">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/sockjs.min.js"></script>
<script src="/js/stomp.js"></script>
<script>
    const wsHost = "http://localhost:8080/notification";
    const wsTopic = "/topic/system";
    const layer = layui.layer;
    const $ = jQuery = layui.jquery;
    let socket = {};
    let stompClient = {};

    $(function () {
        initSockJs();
        function initSockJs() {
            getSystemInfo();
            socket = new SockJS(wsHost);
            stompClient = Stomp.over(socket);
            stompClient.connect({}, (frame) => {
                console.log('websocket连接成功:' + frame);
                $('#init').addClass("layui-btn-disabled").attr("disabled",true);
                $('#destroy').removeClass("layui-btn-disabled").attr("disabled",false);
                layer.msg('websocket服务器连接成功');

                // 另外再注册一下消息推送
                stompClient.subscribe(wsTopic, (response) => {
                    //页面渲染
                    console.log("stompClient response");
                    let res = JSON.parse(response.body);
                    $("#cpuNum").text(res.cpu.cpuNum);
                    $("#cpuUsed").text(res.cpu.used+'%');
                    $("#cpuSys").text(res.cpu.sys+'%');
                    $("#cpuFree").text(res.cpu.free+'%');
                    $("#memTotal").text(res.mem.total+'GB');
                    $("#jvmTotal").text(res.jvm.total+'GB');
                    $("#memUsed").text(res.mem.used+'GB');
                    $("#jvmUsed").text(res.jvm.used+'GB');
                    $("#memFree").text(res.mem.free+'GB');
                    $("#jvmFree").text(res.jvm.free+'GB');
                    $("#memUsage").text(res.mem.usage+'%');
                    $("#jvmUsage").text(res.jvm.usage+'%');
                    $("#jvmName").text(res.jvm.name);
                    $("#jvmVersion").text(res.jvm.version);
                    $("#jvmStartTime").text(res.jvm.startTime);
                    $("#jvmRunTime").text(res.jvm.runTime);
                    $("#jvmHome").text(res.jvm.home);
                    $("#sysUserDir").text(res.sys.userDir);
                    $("#sysComputerName").text(res.sys.computerName);
                    $("#sysOsName").text(res.sys.osName);
                    $("#sysComputerIp").text(res.sys.computerIp);
                    $("#sysOsArch").text(res.sys.osArch);
                    $("#sysFiles").empty();
                    res.sysFiles.map((item,index)=>{
                        $("#sysFiles").append(`
                        <tr>
                            <td>${item.usage}%</td>
                            <td>${item.typeName}</td>
                            <td>${item.sysTypeName}</td>
                            <td>${item.used}</td>
                            <td>${item.total}</td>
                            <td>${item.free}</td>
                            <td>${item.dirName}</td>
                        </tr>
                        `)
                    })
                    monitor(res);
                });
            });
        }

        function getSystemInfo(){
            CoreUtil.sendGet("/sys/info", null, function (res) {
                console.log("getSystemInfo");
                console.log(res);
                if (res.data != null) {
                    $("#cpuNum").text(res.data.cpu.cpuNum);
                    $("#cpuUsed").text(res.data.cpu.used+'%');
                    $("#cpuSys").text(res.data.cpu.sys+'%');
                    $("#cpuFree").text(res.data.cpu.free+'%');
                    $("#memTotal").text(res.data.mem.total+'GB');
                    $("#jvmTotal").text(res.data.jvm.total+'GB');
                    $("#memUsed").text(res.data.mem.used+'GB');
                    $("#jvmUsed").text(res.data.jvm.used+'GB');
                    $("#memFree").text(res.data.mem.free+'GB');
                    $("#jvmFree").text(res.data.jvm.free+'GB');
                    $("#memUsage").text(res.data.mem.usage+'%');
                    $("#jvmUsage").text(res.data.jvm.usage+'%');
                    $("#jvmName").text(res.data.jvm.name);
                    $("#jvmVersion").text(res.data.jvm.version);
                    $("#jvmStartTime").text(res.data.jvm.startTime);
                    $("#jvmRunTime").text(res.data.jvm.runTime);
                    $("#jvmHome").text(res.data.jvm.home);
                    $("#sysUserDir").text(res.data.sys.userDir);
                    $("#sysComputerName").text(res.data.sys.computerName);
                    $("#sysOsName").text(res.data.sys.osName);
                    $("#sysComputerIp").text(res.data.sys.computerIp);
                    $("#sysOsArch").text(res.data.sys.osArch);
                    $("#sysFiles").empty();
                    res.data.sysFiles.map((item,index)=>{
                        $("#sysFiles").append(`
                        <tr>
                            <td>${item.usage}%</td>
                            <td>${item.typeName}</td>
                            <td>${item.sysTypeName}</td>
                            <td>${item.used}</td>
                            <td>${item.total}</td>
                            <td>${item.free}</td>
                            <td>${item.dirName}</td>
                        </tr>
                        `)
                    })
                    monitor(res.data);
                }
            });
        }

        function destroySockJs() {
            if (stompClient != null) {
                stompClient.disconnect();
                socket.onclose;
                socket.close();
                stompClient = {};
                socket = {};
                $('#init').removeClass("layui-btn-disabled").attr("disabled",false);
                $('#destroy').addClass("layui-btn-disabled").attr("disabled",true);
            }
            console.log('websocket断开成功！');
            layer.msg('websocket断开成功！');
        }

        function monitor(data){
            let msg = "";

            if (data.cpu.sys >= 80) {
                $("#cpuSys").addClass("text-danger");
                msg += "提示：CPU使用率过高！</br>";
            }

            if (data.mem.usage >= 80) {
                $("#memUsage").addClass("text-danger");
                msg += "提示：内存使用率过高！</br>";
            }

            if (data.jvm.usage >= 80) {
                $("#jvmUsage").addClass("text-danger");
                msg += "提示：jvm使用率过高！";
            }

            if (msg !== "") {
                layer.msg(msg)
            }
        }

        $('#init').on('click',()=>{
            initSockJs()
        })

        $('#destroy').on('click',function () {
            destroySockJs()
        })
    });
</script>
</body>

</html>